<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="vender/jquery.min.js"></script>
  <script src="vender/jquery.ns-autogrow.min.js"></script>
  <script src="vender/i18n/i18n.js"></script>
  <script src="vender/i18n/i18n-config.js"></script>
  <script src="vender/vue/vue.js"></script>
  <script src="vender/garlic/garlic.min.js"></script>

  <link rel="stylesheet" type="text/css" href="vender/semantic-ui/semantic.min.css">
  <script src="vender/semantic-ui/semantic.min.js"></script>

  <script src="vender/download-as-file.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Web Speech to Text</title>
  <link rel="icon" type="image/png" href="img/icon.png" />
</head>
<body>

  <div id="speechToText">
  
  <div class="ui container">
    <p style="float:right"><a href="http://blog.pulipuli.info/2019/01/web-speech-to-text-speech-recognition.html" target="blog">by<br />布丁布丁吃什麼？</a></p>
    
    <h1>{{ i18n.t('Web Speech to Text') }}</h1>
    <div class="ui floating compact warning icon message virtual-audio-cable-warning">
      <i class="microphone icon"></i>
      
        
      <div class="content">
            {{ i18n.t('Please install and enable Virtual Audio Cable:') }}
            <a href="https://downloads.tomsguide.com/Virtual-Audio-Cable,0301-31100.html" target="_blank">Windows</a>
            |
            <a href="https://alternativeto.net/software/virtual-audio-cable/?platform=mac" target="_blank">Mac</a>
            
          
      </div>
      
        <div class="ui warning mini basic button right floated" v-on:click="openVirtualAudioCableHelpModel">
          {{ i18n.t('Help') }}
        </div>
    </div>
  </div>
  
  <div class="ui two column grid container">
    <div class="four wide column">
      
      
      <div class="recognition-status" data-recognition-status="ready">
        
        <div class="fluid ui basic vertical buttons">
          <a class="fluid ui icon button open-load-local-file-model-btn">
            <i class="hdd outline icon"></i>
			{{ i18n.t('Load Local File') }}
          </a>
          <input type="file" accept=".mp4,.mp3,.ogg,.wav" id="local_file" style="display: none" />
          <a class="fluid ui icon button open-load-url-model-btn">
            <i class="cloud outline icon"></i>
            {{ i18n.t('Load from URL') }}
          </a>
          <a class="fluid ui icon button" v-on:click="loadDemoVideo">
            <i class="bookmark outline icon"></i>
			{{ i18n.t('Load Demo') }}
          </a>
        </div>
        
        <div class="fluid ui icon disabled button warning loading-btn">
          <i class="wait icon"></i>
          {{ i18n.t('Loading') }}
        </div>
        
        <div class="fluid ui icon button primary start-btn">
          <i class="play icon"></i>
          {{ i18n.t('Start') }}
        </div>
        
        <div class="fluid ui icon disabled button warning playing-btn">
          <i class="wait icon"></i>
          {{ i18n.t('Playing') }}
        </div>
        
        <div class='finish-time'>
          {{ i18n.t("Finish in") }} <br />
          {{ finishTime }}
        </div>
        
        <div class="positive fluid ui icon disabled button finish-btn">
          <i class="check icon"></i>
          {{ i18n.t('Finish') }}
        </div>
      </div>
        
    </div>
    <div class="twelve wide column">
      
      <div id="audio_player">
        
        <video controls class="audio-player" style="display: block;max-width: 320px;max-height: 180px;">
          <source src="chi.mp4" type="video/mp4">
          Your browser does not support the audio element.
        </video>
        
        <!--
        <iframe class="audio-player youtube" width="320" height="180" src="https://www.youtube.com/embed/GE7sc_XvJ8w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="pointer-events: none;"></iframe>
        -->
      </div>
      
      
    </div>
  </div>

  <form class="ui form container garlic-auto-save" data-persist="garlic">
    <input type="text" name="setting_load_from_url" class="setting-load-from-url" style="display: none;" v-model="loadFromURLValue" />
    
    <div class="four fields content-controller">
      <div class="three wide field">
        <label>{{ i18n.t('Language') }}</label>
        <select name="setting_lang" class="lang">
          <option value="cmn-Hant-TW">
            {{ i18n.t('cmn-Hant-TW') }}
          </option>
          <option value="cmn-Hans-CN">
            {{ i18n.t('cmn-Hans-CN') }}
          </option>
          <option value="en-US">
            {{ i18n.t('en-US') }}
          </option>
          <option value="ja">
            {{ i18n.t('ja') }}
          </option>
          <option value="ko">
            {{ i18n.t('ko') }}
          </option>
        </select>
      </div>
      <div class="two wide field">
        <label><a href='https://www.science.co.il/language/Locale-codes.php' target='locale-codes'>{{ i18n.t('Custom Language') }}</a></label>
        <input type="text" id='customLang' model='customLang' />
      </div>
      <div class="five wide field">
        <label>{{ i18n.t('Filename') }}</label>
        <input name="setting_filename" type="text" class="filename" v-model="filename" />
      </div>
      <div class="four wide field">
        <label>{{ i18n.t('Output type') }}</label>
        <select name="setting_output_data_type" class="output-data-type">
          <option value="srt" selected>
            {{ i18n.t('Subtitle (.srt)', false) }}
          </option>
          <option value="ods">
            {{ i18n.t('OpenDocument Spreadsheet (.ods)', false) }}
          </option>
          <option value="txt">
            {{ i18n.t('Plain text (.txt)', false) }}
          </option>
          <option value="caption">
            {{ i18n.t('Only caption (.txt)', false) }}
          </option>
        </select>
      </div>
      <div class="two wide field">
        <label>{{ i18n.t('Output download') }}</label>
        <button type="button" class="ui fluid disabled button primary download-btn">
          <i class="icon download"></i>
          {{ i18n.t('Download') }}
        </button>
      </div>
    </div>
  </form>
  <form class="ui form container">
    <!-- ----------------------------------------- -->
    
    <!--
    <span class="speech"></span>
    <span class="blinking"></span>
    -->
    
    <table class="ui striped table thead">
      <thead>
        <tr>
          <th class="start">
            {{ i18n.t('Start from') }}
          </th>
          <th class="hyper">-</th>
          <th class="end">
            {{ i18n.t('End in') }}
          </th>
          <th class="caption">
            {{ i18n.t('Caption') }}
          </th>
        </tr>
      </thead>
    </table>
    <table class="ui striped table tbody">
      <tbody class="text-content">
      </tbody>
    </table>
    
  </form>

  <!-- ---------------------------------- -->
  
  <div class="ui modal load-from-url">
    <div class="header">{{ i18n.t('Load from URL') }}</div>
    <div class="content">
      <div class="ui form">
        <div class="field">
          <input type="text" name="load_from_url_value" v-model="loadFromURLValue" placeholder="YouTube, Video, or Audio URL" /> 
        </div>
        <div class="field">
          {{ i18n.t('Support:') }}
          <ul>
            <li>{{ i18n.t('YouTube, for example: ') }} <br />
              <u style='cursor: pointer;' 
                 v-on:click="changeLang('cmn-Hant-TW');loadFromURLValue='https://www.youtube.com/watch?v=GE7sc_XvJ8w';loadFromURL()">
                https://www.youtube.com/watch?v=GE7sc_XvJ8w 
                ({{ i18n.t('cmn-Hant-TW') }})
              </u>, <br />
              <u style='cursor: pointer;' 
                 v-on:click="changeLang('cmn-Hant-TW');loadFromURLValue='https://www.youtube.com/watch?v=cUh978LguQk';loadFromURL()">
                https://www.youtube.com/watch?v=cUh978LguQk
                ({{ i18n.t('Long video') }})
              </u>, <br />
              <u style='cursor: pointer;' 
                 v-on:click="changeLang('ja');loadFromURLValue='https://www.youtube.com/watch?v=P7qfM0Q2wkk';loadFromURL()">
                https://www.youtube.com/watch?v=P7qfM0Q2wkk
                ({{ i18n.t('ja') }})
              </u>, <br />
              <u style='cursor: pointer;' 
                 v-on:click="changeLang('ko');loadFromURLValue='https://www.youtube.com/watch?v=PAKVWL7XdWo';loadFromURL()">
                https://www.youtube.com/watch?v=PAKVWL7XdWo
                ({{ i18n.t('ko') }})
              </u>
            </li>
            <li v-on:click="loadFromURLValue='chi.mp4'">{{ i18n.t('Video:') }} <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Supported_media_formats" target="format_help">{{ i18n.t('MP4 format with code VP8, VP9, H.264') }}</a></li>
            <li>{{ i18n.t('Audio:') }} <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Supported_media_formats" target="format_help">{{ i18n.t('wav, ogg, mp3 format') }}</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="actions">
      <div class="ui cancel button">{{ i18n.t('Cancel') }}</div>
      <div class="ui primary approve button open-load-url-btn" 
           v-bind:class="{ disabled: loadFromURLValue === '' }"
           v-on:click="loadFromURL">{{ i18n.t('OK') }}</div>
    </div>
  </div>
                                                                                                    
  <div class="ui modal voice-access-modal">
    <div class="header">{{ i18n.t('Grant Microphone Permission') }}</div>
    <div class="content">
      <div class="ui form">
        {{ i18n.t('This APP use your microphone. Please grant microphone permission.') }} <br />
        <img src="img/microphone-permission.png" />
      </div>
    </div>
    <div class="actions">
      <div class="ui primary approve button" 
           v-on:click="grantMicrophonePermission">{{ i18n.t('Grant') }}</div>
    </div>
  </div>
  
  <div class="ui modal virtual-audio-cable-help-modal">
    <div class="header">{{ i18n.t('Enable Virtual Audio Cable') }}</div>
    <div class="content">
        {{ i18n.t('Open your Sound setting.', false) }}
        {{ i18n.t('Set Virtual Audio Cable default in playback and recording.', false) }}
         
         <br />
        <img src="img/sound-playback.png" />
        <img src="img/sound-recording.png" />
    </div>
    <div class="actions">
      <div class="ui approve button">{{ i18n.t('OK') }}</div>
    </div>
  </div>
    
  <!-- ---------------------------------- -->
  
  </div> <!-- <div id="speechToText"> -->
  
  
  <!-- ---------------------------------- -->
  
  <script src="vender/js-xlsx/shim.min.js"></script>
  <script src="vender/js-xlsx/xlsx.full.min.js"></script>
  <script src="vender/js-xlsx/Blob.js"></script>
  <script src="vender/js-xlsx/FileSaver.js"></script>
  <script src="vender/js-xlsx/xlsx-helper.js"></script>
            
  <script src="vue-init.js"></script>
  <script src="lib/speech-to-text.js"></script>
  <script src="lib/file-loader.js"></script>
  <script src="lib/youtuble-utils.js"></script>
  <script src="lib/output-download.js"></script>
  <script src="lib/recognition.js"></script>
  <script src="lib/voice-access.js"></script>
  <script src="script.js"></script>
</body>
</html>
